<template>
  <div class="q-px-lg">
    <q-scroll-area
      :dark="ui.isDark"
      style="width: 100%; height: calc(100% - 48px)"
    >
      <div class="q-mt-xl q-mx-md">
        <input-item
          :label="$t('microService.目标IP')"
          icon="directions_car"
          :inputLabel="$t('microService.目标IP地址')"
          color="accent"
          v-model="useAPIStore().deviceIP"
          :dark="ui.isDark"
          @click="setServerIP"
        />
        <input-item
          :label="$t('microService.中控IP')"
          icon="router"
          :inputLabel="$t('microService.中控IP地址')"
          color="accent"
          v-model="apiStore.centerIP"
          @click="setServerIP('center')"
          :dark="ui.isDark"
        />
      </div>
      <q-list v-if="status.network" separator :dark="ui.isDark" class="q-mx-md">
        <q-item-label header class="text-h6">{{
          $t("microService.当前网络")
        }}</q-item-label>
        <q-item v-ripple>
          <q-item-section class="text-subtitle2">{{
            status.network.name
          }}</q-item-section>
          <q-item-section side>{{ status.network.IPv4 }}</q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </div>
</template>

<script setup>
import InputItem from "components/setting/InputItem.vue"; // 列表每一项
import { status } from "src/utils/deviceWs";
import { useUiStore } from "stores/ui";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const t = useI18n().t;

const $q = useQuasar();
const ui = useUiStore();
const apiStore = useAPIStore();
function setServerIP(mode) {
  $q.dialog({
    title:
      mode === "center"
        ? t("microService.设置中控IP")
        : t("microService.设置目标IP"),
    message:
      mode === "center"
        ? t("microService.请输入中控的IP地址")
        : t("microService.请输入目标的IP地址"),
    prompt: {
      model: mode === "center" ? apiStore.centerIP : apiStore.deviceIP,
      type: "text",
      clearable: true,
    },
    ok: {
      label: t("ok"),
      class: "text-bold",
      flat: true,
    },
    cancel: {
      label: t("cancel"),
      class: "text-bold",
      color: "secondary",
      flat: true,
    },
    dark: ui.isDark,
    persistent: true,
  }).onOk((data) => {
    if (mode === "center") {
      apiStore.centerIP = data;
    } else {
      apiStore.deviceIP = data;
    }
    $q.notify({
      type: "positive",
      message: t("microService.服务设置成功设置为") + data,
      position: "top",
    });
  });
}
</script>

<style scoped></style>
